<template>
  <!-- 学术 -->
  <div class="zhu">
    <!-- 日期 -->
    <div class="day">
      <div class="tou">
        <div class="day-time">
          <div class="day-b"></div>
          <span class="time">时间</span>
          <span class="xia">
            <div v-on:click="n = !n">
              <img
                src="https://qn.cache.wpscdn.cn/encs/wpscn/images/assets/drop-down.7bd5ac5a.png"
                alt=""
              />
            </div>
          </span>
        </div>
        <div class="shuru" v-show="n">
          <span class="aca_input_start">
            <input id="start_year" maxlength="4" placeholder="年" />
            <label id="start_year_placehoder">年</label>
          </span>
          <span class="year_range_hline"></span>
          <span class="aca_input_end">
            <input id="end_year" maxlength="4" placeholder="年" />
            <label id="end_year_placehoder">年</label>
          </span>
          <span class="dqd">确定</span>
        </div>
      </div>
    </div>
    <!-- 下拉 -->
    <div class="xiala">
      <div class="aca_top_items">
        <select id="aca_sort_select">
          <option
            selected="selected"
            value="/academic/search?q=vue&amp;sort=1&amp;FORM=S00060"
          >
            按相关性
          </option>
          <option value="/academic/search?q=vue&amp;sort=2&amp;FORM=S00060">
            时间倒序
          </option>
          <option value="/academic/search?q=vue&amp;sort=3&amp;FORM=S00060">
            时间正序
          </option>
          <option value="/academic/search?q=vue&amp;sort=4&amp;FORM=S00060">
            按引用数
          </option>
        </select>
      </div>
    </div>
    <!-- 内容部分 -->
    <ol class="content">
      <li class="aca_algo" data-bm="4">
        <h2 class="">
          <a
            href="https://vue.tufts.edu/docs/"
            h="ID=SERP,5274.1"
            target="_blank"
          >
            <strong>VUE</strong>
            -
            <strong>Documentation</strong>
          </a>
        </h2>
        <div class="aca_caption">
          <div class="caption_display_url">
            <cite>
              https://
              <strong>vue</strong>
              .tufts.edu/docs
            </cite>
          </div>
          <div class="caption_abstract">
            <p>
              <strong>VUE</strong>
              Search · Organize · Present. About Gallery Features Forums FAQ
              <strong>Documentation</strong>
              Contact. Fork me on GitHub.
              <strong>Documentation</strong>
              User Guide in English. The user guide is hosted on our wiki. It
              may be out of …
            </p>
          </div>
        </div>
      </li>
      <li class="aca_algo" data-bm="5">
        <h2 class="">
          <a
            href="https://vue.tufts.edu/gallery/"
            h="ID=SERP,5282.1"
            target="_blank"
          >
            <strong>VUE</strong>
            - Gallery
          </a>
        </h2>
        <div class="aca_caption">
          <div class="caption_display_url">
            <cite>
              https://
              <strong>vue</strong>
              .tufts.edu/gallery
            </cite>
          </div>
          <div class="caption_abstract">
            <p>
              The "Gallery" section is new to our website. We hope to build a
              strong
              <strong>VUE</strong>
              community of users and thinkers. We need your help in creating a
              stimulating gallery area, showcasing your uses of
              <strong>VUE</strong>
              . Let u…
            </p>
          </div>
        </div>
      </li>
      <li class="aca_algo" data-bm="6">
        <h2 class="">
          <a href="http://vue.ed.ac.uk/" h="ID=SERP,5283.1" target="_blank">
            <strong>Vue</strong>
            - Virtual University of Edinburgh
          </a>
        </h2>
        <div class="aca_caption">
          <div class="caption_display_url">
            <cite>
              <strong>vue</strong>
              .ed.ac.uk
            </cite>
          </div>
          <div class="caption_abstract">
            <p>
              <strong>Vue</strong>
              - Virtual University of Edinburgh.
              <strong>Vue</strong>
              is a virtual educational and research institute bringing together
              all those. interested in the use of virtual worlds for teaching,
              research and outreach. related to the Unive…
            </p>
          </div>
        </div>
      </li>
      <li class="aca_algo" data-bm="8">
        <h2 class="">
          <a
            href="https://vue.tufts.edu/faq/"
            h="ID=SERP,5285.1"
            target="_blank"
          >
            <strong>VUE</strong>
            - FAQ
          </a>
        </h2>
        <div class="aca_caption">
          <div class="caption_display_url">
            <cite>
              https://
              <strong>vue</strong>
              .tufts.edu/faq
            </cite>
          </div>
          <div class="caption_abstract">
            <p>
              No,
              <strong>VUE</strong>
              is written in Java and we do not have funding to port
              <strong>VUE</strong>
              to mobile platforms. It will nto run on any iOS or Android device.
              How can I contribute a translation of
              <strong>VUE</strong>
              to another language? Over the ye…
            </p>
          </div>
        </div>
      </li>
      <li class="aca_algo" data-bm="9">
        <h2 class="">
          <a
            href="https://sites.tufts.edu/ets/vue/"
            h="ID=SERP,5286.1"
            target="_blank"
          >
            Tufts Educational Technology Services |
            <strong>VUE</strong>
            (
            <strong>Visual Understanding Environment</strong>
            )
          </a>
        </h2>
        <div class="aca_caption">
          <div class="caption_display_url">
            <cite>
              https://sites.tufts.edu/ets/
              <strong>vue</strong>
            </cite>
          </div>
          <div class="caption_abstract">
            <p>
              The
              <strong>Visual Understanding Environment</strong>
              (
              <strong>VUE</strong>
              ) is a concept and content mapping application, developed to
              support teaching, learning and research and for anyone who needs
              to organize, contextualize, and acce…
            </p>
          </div>
        </div>
      </li>
    </ol>
    <ol class="b_context">
      <li class="aca_card">
        <div class="aca_card_title">
          <img
            class="rms_img"
            src=""
            data-bm="29"
          />
          <div class="card_title_txt">
            <a
              target="_blank"
              href="/academic/profile?id=141596103&amp;v=affiliation_preview"
              h="ID=SERP,5252.1"
            >
              University of Lisbon
            </a>
          </div>
        </div>
        <div class="aca_card_facts">
          <div class="aca_card_fact">
            <span class="card_fact_label">官方网站：</span>
            <span class="card_fact_content">
              <a
                target="_blank"
                href="http://www.ulisboa.pt/"
                h="ID=SERP,5253.1"
              >
                http://www.ulisboa.pt/
              </a>
            </span>
          </div>
        </div>
        <div class="aca_card_description">
          <span id="aca_card_dsc0">
            The University of Lisbon (ULisboa; Portuguese: Universidade de
            Lisboa, [univɨɾsiˈðad(ɨ) dɨ liʒˈbo.ɐ]) is a public research
            university in Lisbon, and the largest university in Portugal. It was
            founded in 2013, from the merger of two previous public universities
            located in Lisbon, the former University of Lisbon (1911–2013) and
            the Technical Universit…
          </span>
        </div>
        <div class="aca_card_wiki">
          <img
            class="rms_img"
            src=""
            data-bm="32"
          />
          <a
            target="_blank"
            href="http://en.wikipedia.org/wiki/University_of_Lisbon"
            h="ID=SERP,5251.1"
          >
            Wikipedia
          </a>
        </div>
      </li>
      <li class="aca_related">
        <div class="aca_related_domains">
          <div class="aca_related_title">
            <div class="related_title_text">相关领域</div>
          </div>
          <div>
            <div class="related_domain" v-for="value in english" :key="value">
              <a
                target="_blank"
                href="/academic/profile?id=86803240&amp;v=fos_preview"
              >
                {{ value }}
              </a>
            </div>
          </div>
        </div>
      </li>
    </ol>
  </div>
</template>

<script>
export default {
  data() {
    return {
      n: true,
      english: [
        'biology',
        'chemistry',
        'physics',
        'medicine',
        'computer science',
      ],
    }
  },
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  font: 13px / normal Arial, Helvetica, Sans-Serif;
  color: #666;
}
a {
  text-decoration: none;
}
ul,
li {
  list-style: none;
}
.zhu {
  height: 580px;
  padding: 41px 0 20px 160px;
  position: relative;
  .day {
    width: 148px;
    margin: 10px 0 0 -160px;
    display: inline-block;
    vertical-align: top;
    .tou {
      padding-bottom: 25px;
      .day-time {
        display: flex;
        color: #333;
        font-size: 14px;
        height: 25px;
        line-height: 25px;
        padding-left: 20px;
        padding-bottom: 15px;
        cursor: pointer;
        .day-b {
          margin-right: 10px;
          vertical-align: middle;
          height: 20px;
          line-height: 20px;
          width: 20px;
          overflow: hidden;
          position: relative;
          background-image: url('');
          background-repeat: no-repeat;
          background-position: -83px 0px;
        }
        .time {
          vertical-align: middle;
          font: 13px / normal Arial, Helvetica, Sans-Serif;
        }
        .xia {
          margin-left: 50px;
          img {
            width: 70%;
            margin-bottom: 5px;
            opacity: 0.5;
          }
        }
      }
      .shuru {
        padding: 15px 0 57px 18px;
        color: #434c67;
        position: relative;
        .aca_input_start {
          position: absolute;
          #start_year {
            width: 46px;
            height: 18px;
          }
          input {
            font: inherit;
            font-size: 100%;
          }
          #start_year_placehoder {
            top: 0;
            left: 3px;
            height: 15px;
            color: #bababa;
            position: absolute;
            display: none;
          }
        }
        .year_range_hline {
          width: 9px;
          height: 1px;
          display: inline-block;
          background-color: #d8d8d8;
          position: absolute;
          top: 27px;
          left: 73px;
        }
        .aca_input_end {
          left: 87px;
          position: absolute;
          #end_year {
            width: 46px;
            height: 18px;
          }
          input {
            font: inherit;
            font-size: 100%;
          }
          #end_year_placehoder {
            top: 0;
            left: 3px;
            height: 15px;
            color: #bababa;
            position: absolute;
            display: none;
          }
        }
        .dqd {
          position: absolute;
          top: 49px;
          width: 40px;
          height: 20px;
          padding-top: 2px;
          text-align: center;
          background-color: #0076de;
          color: #fff;
          display: inline-block;
          font: 13px / normal Arial, Helvetica, Sans-Serif;
        }
      }
      #active {
        display: none;
      }
    }
  }
  .xiala {
    height: 15px;
    position: absolute;
    left: 150px;
    top: 43px;
    width: 100%;
  }
  .aca_top_items {
    left: 569px;
    position: absolute;
    #aca_sort_select {
      border: 0;
      padding: 0;
      margin-top: -3px;
      height: 20px;
      option {
        font-weight: normal;
        display: block;
        white-space: pre;
        min-height: 1.2em;
        padding: 0px 2px 1px;
      }
      .ctxt,
      select,
      input[type='text'] {
        color: #444;
        border-color: #ddd;
      }
    }
  }
  .content {
    width: 652px;
    position: absolute;
    left: 160px;
    top: 60px;
    .aca_algo {
      padding-left: 0;
      padding-right: 0;
      margin-left: 20px;
      margin-right: 20px;
      padding-bottom: 15px;
      margin-bottom: 0;
      width: 612px;
      border-bottom: 1px solid #eee;
      padding-top: 10px;
      strong {
        color: #c00;
        font-weight: 400;
      }
      h2 {
        padding-bottom: 7px;
        line-height: 20px;
        a {
          color: #00c;
          font-size: 18px;
          font-weight: normal;
          strong {
            color: #c00;
            font-weight: 400;
            font-size: 18px;
          }
        }
        a:hover {
          text-decoration: underline;
        }
      }
      .caption_display_url {
        padding-bottom: 3px;
        cite {
          color: #009030;
          strong {
            color: #c00;
            font-weight: 400;
          }
        }
      }
    }
  }
  .b_context {
    width: 350px;
    margin-left: 5px;
    position: absolute;
    left: 830px;
    top: 90px;
    .aca_card {
      padding: 20px;
      border: 1px solid #eee;
      margin-bottom: 15px;
      .aca_card_title {
        padding-bottom: 15px;
        display: flex;
        .rms_img {
          margin-right: 10px;
          display: inline-block;
          vertical-align: middle;
        }
        .card_title_txt {
          font-size: 20px;
          width: 260px;
          line-height: 32px;
          a {
            color: #1020d0;
            font-size: 20px;
          }
          a:hover {
            text-decoration: underline;
          }
        }
      }
      .aca_card_facts {
        padding-bottom: 15px;
        .aca_card_fact {
          padding-bottom: 0;
          .card_fact_label {
            color: #737373;
            width: 75px;
            display: inline-block;
            vertical-align: middle;
          }
          .card_fact_content {
            width: 233px;
            a {
              color: #1020d0;
            }
            a:hover {
              text-decoration: underline;
            }
          }
        }
      }
      .aca_card_description {
        line-height: 20px;
        padding-bottom: 10px;
      }
      .aca_card_wiki {
        padding-bottom: 0;
        .rms_img {
          margin-right: 10px;
          vertical-align: middle;
        }
        a {
          color: #1020d0;
        }
        a:hover {
          text-decoration: underline;
        }
      }
    }
    .aca_related {
      padding: 20px;
      border: 1px solid #eee;
      margin-bottom: 15px;
      background-color: #fff;
      .aca_related_domains {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
        .aca_related_title {
          padding-bottom: 15px;
          .related_title_text {
            display: inline-block;
            font-size: 16px;
          }
        }
        div {
          .related_domain {
            height: 32px;
            line-height: 32px;
            padding-left: 10px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
          .related_domain:nth-child(odd) {
            background-color: #f9f9f9;
          }
        }
      }
    }
  }
}
</style>
